import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { SongsCoverWrapper } from './style'
import { getCount, getSizeImage } from '@/utils/format-utils'
import { Link } from 'react-router-dom'

interface IProps {
  children?: ReactNode
  info: any
}

const SongsCover: FC<IProps> = (props) => {
  const { info } = props
  const creator = info && info.creator && info.creator.nickname
  const create = info.copywriter || creator
  const id = info.id
  const playCount = info && info.playCount
  return (
    <SongsCoverWrapper rel="noopener noreferrer">
      <Link to="/discover/playlistdetail" state={{ id: id }}>
        <div className="cover-top">
          <img
            src={getSizeImage(info?.picUrl || info?.coverImgUrl, 140)}
            alt=""
          />
          <div className="cover sprite_cover">
            <div className="info sprite_cover">
              <span>
                <i className="sprite_icon erji"></i>
                {getCount(playCount)}
              </span>
              <i className="sprite_icon play"></i>
            </div>
          </div>
        </div>
        <div className="cover-bottom text-nowrap">{info.name}</div>
        <div className="cover-source text-nowrap">by {create}</div>
      </Link>
    </SongsCoverWrapper>
  )
}

export default memo(SongsCover)
